/**
 * Copyright 2019 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
const template = /** @type {!HTMLTemplateElement} */(document.createElement('template'));
template.innerHTML = `
<style>
  paper-card {
    margin: 10px;
    display:block;
    padding: 10px;
  }
  #metrics {
    width: 100%;
  }
  .flex-horizontal {
    @apply --layout-horizontal;
  }
  .container {
    --paper-font-subhead_-_font-size: 14px;
  }
  .no-data-warning {
    font-family: 'Roboto';
    font-size: 13px;
    margin-left: 15px;
  }
</style>

<div class="container">
  <paper-card id="run-selector"
            hidden$="[[hideRunSelector_(hideSelectEvalRunDropDown_, evaluationRuns_)]]">
    <paper-dropdown-menu label="Select evaluation run:" title$="[[selectedEvaluationRun_]]">
      <paper-listbox selected="{{selectedEvaluationRun_}}" attr-for-selected="run"
                     class="dropdown-content" slot="dropdown-content" title$="">
        <template is="dom-repeat" items="[[evaluationRuns_]]">
          <paper-item run="[[item]]">
            <span class="evaluation-run" title$="[[item]]">[[item]]</span>
          </paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>
    <paper-item>
      <paper-checkbox id="model-comparison" checked="{{modelComparisonEnabled_}}">
         <span class="model-comparison" title$="Enable Model Comparison">
           Enable Model Comparison
        </span>
      </paper-checkbox>
    </paper-item>
    <div id="div-to-compare" hidden$="[[!modelComparisonEnabled_]]">
      <paper-dropdown-menu id="drop-down-to-compare"
                           label="Select evaluation run to compare:"
                           title$="[[selectedEvaluationRunCompare_]]">
        <paper-listbox selected="{{selectedEvaluationRunCompare_}}" attr-for-selected="run"
                       class="dropdown-content" slot="dropdown-content" title$="">
          <template is="dom-repeat" items="[[evaluationRuns_]]">
            <paper-item run="[[item]]">
              <span class="evaluation-run" title$="[[item]]">[[item]]</span>
            </paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>
    </div>
  </paper-card>
  <fairness-nb-container slicing-metrics="[[slicingMetrics_]]"
                         slicing-metrics-compare="[[slicingMetricsCompare_]]"
                         eval-name="base"
                         eval-name-compare="compare">
  </fairness-nb-container>

  <template is="dom-if" if="[[!slicingMetrics_.length]]">
    <div class="no-data-warning">
      <template is="dom-if" if="[[!hideSelectEvalRunDropDown_]]">
        <h3>No fairness evaluation data was found.</h3>
        <p>Probable causes:</p>
        <ul>
          <li>You haven’t written any evaluation data to your event files.</li>
          <li>Tensorboard might be looking for your event files, please wait for few seconds.</li>
          <li>TensorBoard can’t find your event files.</li>
          <li>Selected evaluation run doesn't contain any fairness evaluation related data.</li>
        </ul>

        <p>
          If you’re new to using TensorBoard, and want to find out how to
          add data and set up your event files, check out the Fairness Indicators
          for Tensorboard
          <a href="https://www.tensorflow.org/tensorboard/fairness_indicators" target="_blank" >
            tutorial
          </a>
          and Fairness Indicators
          <a href="https://github.com/tensorflow/fairness-indicators" target="_blank">README</a>.
        </p>

        <p>
          If you think TensorBoard is configured properly, please see the section of the
          <a href="https://github.com/tensorflow/tensorboard/blob/master/README.md#my-tensorboard-isnt-showing-any-data-whats-wrong"
             target="_blank">README</a>
          devoted to missing data problems and consider filing an issue on
          <a href="https://github.com/tensorflow/fairness-indicators/issues"
             target="_blank">GitHub</a>.
        </p>
      </template>

      <template is="dom-if" if="[[hideSelectEvalRunDropDown_]]">
        <h3>Rendering Fairness Evaluation Results.</h3>
        <p>
          Note: This may take a couple of minutes. If the UI still fails to render, please check if
          the evaluation output path provided in the URL contains the evaluation results, or
          consider filing an issue on
          <a href="https://github.com/tensorflow/fairness-indicators/issues"
             target="_blank">GitHub</a>.
        </p>
      </template>
    </div>
  </template>
</div>
`;
export {template};
